<template>
  <div class="index">
      <div class="intop">
        <p>行业专家 人工解答</p>
        <div class="intopBtn">
          <div class="inBtn inlgbtn">99元/年 不限次数</div>
          <div class=" inBtns flex justify-between row">
            <div class="inBtn">激活</div>
            <div class="inBtn">购买</div>
          </div>
        </div>
      </div>
      <div class="inNav">
        <div class="inNavItem" v-for="(it, index) of navlist" :key="it.id" @click="toconsultlist(index)">
          <i :class="`${iconList[index].name} lg text-gray icon bg-${iconList[index].bgcolor}`"></i>
          <div>
            <span>{{it.CateName}}</span>
            <p>{{it.desc}}</p>
          </div>
        </div>
<!--        <div class="inNavItem" >-->
<!--          <i class="cuIcon-likefill lg text-gray icon bg-yellow"></i>-->
<!--          <div>-->
<!--            <span>情感咨询</span>-->
<!--            <p>情感相关服务，在线咨询，在线咨询在线咨询</p>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="inNavItem" >-->
<!--          <i class="cuIcon-roundaddfill lg text-gray icon bg-pink"></i>-->
<!--          <div>-->
<!--            <span>健康咨询</span>-->
<!--            <p>提供健康、在线服务区、口罩预约、医用口罩信息查询服务</p>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="inNavItem" >-->
<!--          <i class="cuIcon-creativefill lg text-gray icon bg-orange"></i>-->
<!--          <div>-->
<!--            <span>风水占卜</span>-->
<!--            <p>风水、八卦在线算命等服务服务</p>-->
<!--          </div>-->
<!--        </div>-->
      </div>
      <div class="innewList">
        <div class="inNewsLlistTit">科普</div>
        <div class="innewsItem" v-for="item of hotlist" :key="item.id" @click="tonewDetail(item.id)">
          <div class="innewsInfo">
            <p>{{item.title}}</p>
            <div class="innewsTarg flex space-between">
              <div>{{item.CateName}} {{item.addtime}}</div>
              <div>
<!--                <span>阅读 7.5万</span>-->
                <span> 赞 {{item.dz}}</span>
              </div>
            </div>
          </div>
          <img :src="item.url" mode="widthFix" />
        </div>
      </div>
    <div class="foot">
      <tabbarNav :tabbarindex="tabbarindex" />
    </div>
  </div>

</template>

<script>
import { gethotlist, getshopList } from '@/api/index'
import tabbarNav from '@/components/nav'
import axios from 'axios'
export default {
  name: 'indexpage',
  data () {
    return {
      tabbarindex: 0,
      hotlist: [],
      navlist: [],
      url: process.env.VUE_APP_BASE_API,
      iconList: [
        {name: 'cuIcon-paintfill', bgcolor: 'cyan'},
        {name: 'cuIcon-likefill', bgcolor: 'yellow'},
        {name: 'cuIcon-roundaddfill', bgcolor: 'pink'},
        {name: 'cuIcon-creativefill', bgcolor: 'orange'},
        {name: 'cuIcon-add', bgcolor: 'yellow'}
      ]
    }
  },
  components: { tabbarNav },
  created () {
    this.getcommon()
    this.getHotlist()
    this.getNavList()
  },
  methods: {
    getcommon () {
      axios.post('https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf8b0d3324d5dba7a&redirect_uri=https://zx.discoveredcn.com/qz_gz_login&response_type=code&scope=snsapi_bas\n' +
        'e&state=123#wechat_redirect').then(res => {
        console.log(res)
      })
    },
    getHotlist () {
      gethotlist().then(res => {
        this.hotlist = res.data
      })
    },
    getNavList () {
      getshopList().then(res => {
        this.navlist = res.data
      })
    },
    tonewDetail (e) {
      this.$router.push({name: 'newsDetail', params: {id: e}})
    },
    toconsultlist (e) {
      this.$router.push({name: 'myconsult', params: {id: this.navlist[e].id, index: e}})
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../assets/css/common.styl"
    $bg-cyan #62D4A6 100%
    .bg-cyan
      background $bg-cyan
    .bg-orange
      background $bg-orange
    .bg-yellow
      background $bg-yellow
    .bg-pink
      background $bg-pink
  .intop {
    background $mainbgcorlor
    padding: .5rem .3rem ;
    min-height: 3rem;
  }
  .intop p {
    text-align: center;
    font-size: .64rem;
    color: #fff;
    display: block;
    margin-bottom: .4rem;
  }
  .inBtns{
    width: 40%;
    display flex
    flex-direction row
    justify-content space-between
    align-items center
  }
  .inlgbtn{
    color:#E37713;
    font-size: .32rem;
    font-weight: bold;
  }
  .intopBtn {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .inBtn {
    background: #fff;
    border-radius: .1rem;
    padding: .14rem .3rem;
  }
  .inNav{
    padding: .3rem;
    margin-top: -1.5rem;
  }
  .inNavItem {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    padding: .5rem;
    border-radius: 10px;
    box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0);
    margin-bottom: .3rem;
    background-color: #fff;
  }
  .inNavItem span
    font-size .4rem
    margin-bottom .2rem
    display block
  .inNavItem .icon {
    padding: .3rem;
    border-radius: 50%;
    color: #fff;
    margin-right: .2rem;
    font-size: .6rem;
  }
  .inNavItem rich-text{
    font-size: 40px;
    color: #101010;
    font-weight: 600;
  }
  .innewList
    margin-bottom 1.2rem
  .inNewsLlistTit{
    text-align: center;
  }
  .innewsInfo{
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-between;
    height: 1.5rem;
  }
  .innewsItem{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: .3rem;
    border-bottom: 1px solid #F7F7F7;
  }
  .innewsItem img{
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 10px;
    background-color: #efefef;
  }
  .innewsTarg{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    color: #B7B6B6;
    font-size: .24rem;
  }
  .innewsInfo>p{
    color: #101010;
    font-size: .28rem;
    line-height .35rem
  }
</style>
